$(function () {
    
     
    //酒店列表 下拉框初始化
    $(".scenic").M_select({
        // 手动添加下拉款图片（以html页面为起始位置写路径）
        "Img": "./assets/plugin/M_select/up6.png",
        "Img2": "./assets/plugin/M_select/down6.png",
        "radius": "4px",
        // "Title": "选择景区",
        "inputName": "selected_value",
        // 默认选中的值（参数值写需要选中的select的value值）
        "selected": "0",
        Succee: function () {
           var site = $('#select-hotel').val()
            console.log(site)
            if(site==0){
                window.location.href="./chanye_jd.html";
            }
            if(site==1){
                window.location.href="./chanye_jd_zzdjd.html";
            }
        }
    });
    // 日期选择
    $('.date-select-list .date-tab>a').click(function(){
        $(this).addClass('active').siblings('a').removeClass('active')
        if($(this).text()=='日'){
            $(this).parent().siblings('.select-date-box').find('span').text('日期')
            $('#selectDate').removeClass('hd').siblings('input').addClass('hd')
        }
        if($(this).text()=='月'){
            $(this).parent().siblings('.select-date-box').find('span').text('月份')
            $('#selectMonth').removeClass('hd').siblings('input').addClass('hd')
        }
        if($(this).text()=='年'){
            $(this).parent().siblings('.select-date-box').find('span').text('年份')
            $('#selectYear').removeClass('hd').siblings('input').addClass('hd')
        }
    })
     //选择日
     laydate.render({
        elem: '#selectDate', //指定元素
        theme: '#37B866',
        range: true,
        trigger: 'click',
        min: -10,
        max: 0
    });
     //选择月
     laydate.render({
        elem: '#selectMonth', //指定元素
        theme: '#37B866',
        type: 'month',
         range: true,
         trigger: 'click',
    });
     //选择年
     laydate.render({
        elem: '#selectYear', //指定元素
        theme: '#37B866',
        type: 'year',
         range: true,
         trigger: 'click',
    });
   
    //数字
    $('.numberStyle').leoTextAnimate({
        delay:1000, //延时出现时间
        autorun: true, //是否自动运行
        fixed: [',', ':', '.'], //
        start: '0'
    });
    
    //地图
    function myChart1() {
        var myChart = echarts.init(document.getElementById('hotel_1'));
        var data = [
            {
                name: '齐齐哈尔'
            }, {
                name: '盐城'
            }, {
                name: '青岛'
            }, {
                name: '金昌'
            }, {
                name: '泉州'
            }, {
                name: '拉萨'
            }, {
                name: '上海浦东'
            }, {
                name: '攀枝花'
            }, {
                name: '威海'
            }, {
                name: '承德'
            }, {
                name: '汕尾'
            }, {
                name: '克拉玛依'
            }, {
                name: '重庆市'
            },{
                name: '北京市'
            },
            {
                name: '上海',
                value: 0
            }
        ];
        var chinaDatas = [
            {
                name: '黑龙江',
                value: 0
            },
            {
                name: '内蒙古',
                value:0
            },{
                name: '吉林',
                value:0
            },{
                name: '辽宁',
                value: 0
            },{
                name: '河北',
                value: 0
            },{
                name: '天津',
                value: 0
            },{
                name: '山西',
                value: 0
            },{
                name: '陕西',
                value: 0
            },{
                name: '甘肃',
                value: 0
            },{
                name: '宁夏',
                value: 0
            },{
                name: '青海',
                value: 0
            },{
                name: '新疆',
                value: 0
            },{
                name: '西藏',
                value: 0
            },{
                name: '四川',
                value: 0
            },{
                name: '重庆',
                value: 0
            },{
                name: '山东',
                value: 0
            },{
                name: '河南',
                value: 0
            },{
                name: '江苏',
                value: 0
            },{
                name: '安徽',
                value: 0
            },{
                name: '湖北',
                value:0
            },{
                name: '浙江',
                value: 0
            },{
                name: '福建',
                value:0
            },{
                name: '江西',
                value: 0
            },{
                name: '湖南',
                value: 0
            },{
                name: '贵州',
                value: 0
            },{
                name: '广西',
                value:0
            },{
                name: '海南',
                value: 0
            },{
                name: '上海',
                value: 0
            },{
                name: '北京',
                value: 0
            }
        ];
        var geoCoordMap = {

            '齐齐哈尔': [123.97, 47.33],
            '盐城': [120.13, 33.38],
            '青岛': [120.33, 36.07],
            '金昌': [102.188043, 38.520089],
            '泉州': [118.58, 24.93],
            '拉萨': [91.11, 29.97],
            '上海浦东': [121.48, 31.22],
            '攀枝花': [101.718637, 26.582347],
            '威海': [122.1, 37.5],
            '承德': [117.93, 40.97],
            '汕尾': [115.375279, 22.786211],
            '克拉玛依': [84.77, 45.59],
            '重庆市': [108.384366, 30.439702],
            '北京市': [116.4551,40.2539],
            '洛阳市':[112.45425,34.613807],
            '开封':[114.347061,34.815321],
            '郑州市':[113.646939,34.759134],
            '安阳市':[114.400257,36.106722],
            '鹤壁市':[114.308765,35.754702],
            '新乡市':[113.912811,35.309715],
            '上海': [121.4648, 31.2891],
            "泽州":[112.798426,35.599536]

        };
        var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
        var dataFrom = '新乡市';
        myChart.setOption({
            series: [{
                type: 'map',
                map: 'china',
            }]
        });
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[data[i].name];
                var toCoord = [113.912811,35.309715];
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord,
                        // value: dataItem[0].value
                    }, {
                        coord: toCoord,
                    }]);
                }
            }
            return res;
        };
        option = {
            tooltip: {
                trigger: 'item',
                formatter:function (data) {
                    return data.data.name +'游客数：' +data.value
                }
            },
           
            visualMap: {
                show:false,
                min: 0,
                max: 100,
                left: 'left',
                top: 'top',
                text: ['高', '低'],
                calculable: true,
                inRange: {
                    color:" rgba(147, 235, 248, .2)"
                }
            },
            toolbox: {
                show: false,
            },
            geo: {
                map: 'china',
                zoom: 0.6,
                top:'-5%',
                label: {
                    normal: {
                        show: true,
                        color: '#c1c4c8'
                    },
                    emphasis: {
                        show: false,
                        color: '#292929'
                    }
                },

                roam: true,
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#1deaaf',
                        borderWidth: 0
                    }
                }
            },
            series: [

                {
                    name: '泽州',
                    type: 'lines',
                    zlevel: 2,
                    symbolSize: 10,
                    effect: {
                        show: true,
                        period: 6,
                        symbol: planePath,
                        trailLength: 0,
                        symbolSize: 15

                    },
                    lineStyle: {
                        normal: {
                            color:chartColor[0],
                            width: 2,
                            opacity:0.5,
                            curveness:0.2
                        }
                    },
                    label: {
                        show:false,
                        normal: {
                            show:false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    tooltip:{
                        show:false
                    },
                    data: data.map(function (dataItem) {
                        return {
                            fromName: dataFrom,
                            toName: dataItem.name,
                            coords: [
                                geoCoordMap[dataItem.name],
                                geoCoordMap[dataFrom]
                            ]
                        }
                    })
                },{
                    name: '游客数',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: 8,
                    showEffectOn: 'render',
                    rippleEffect: {
                        scale: 5,
                        brushType: 'stroke'
                    },


                    hoverAnimation: true,
                    // label: {
                    //     show:false,
                    //     normal: {
                    //         formatter: '{b}',
                    //         position: 'right',
                    //         show: true
                    //     },
                    //     emphasis: {
                    //         show: true
                    //     }
                    // },
                    label: {
                        show:false,
                        normal: {
                            show:false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c60fff',
                            shadowBlur: 20,
                            shadowColor: '#333'
                        }
                    }
                }, {
                    type: "map",
                    map: "Map",
                    mapType: 'china',
                    geoIndex: 0,
                    left:'50%',
                    roam: false, //是否可缩放
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:chinaDatas
                }]
        };
        myChart.setOption(option);
    }
    function circle1() {
        var myChart = echarts.init(document.getElementById('chart-circle1'));
        option = {
            color:chartColor,
            title: {
                text: '客房数',
                x: 'center',
                y: 'top',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 13,
                    color: "#fff",
                }
            },
            series: [
                {
                    startAngle: 0,
                    center: ['50.0%', '50%'],
                    radius: ['50%', '40%'],
                    hoverAnimation: false,
                    type: 'pie',
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 0,
                        name: '0',
                        label: {
                            normal: {
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '24',
                                }
                            }
                        }
                    }, {
                        itemStyle: {
                            normal: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        },
                        value: 40
                    }]
                }
            ]
        };
        myChart.setOption(option);
    }
    function circle2() {
        var myChart = echarts.init(document.getElementById('chart-circle2'));
        option = {
            color:chartColor,
            title: {
                text: '客房出租率',
                x: 'center',
                y: 'top',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 13,
                    color: "#fff",
                }
            },
            series: [
                
                {
                    startAngle: 0,
                    center: ['50.0%', '50%'],
                    radius: ['50%', '40%'],
                    hoverAnimation: false,
                    type: 'pie',
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 0,
                        name: '0%',
                        label: {
                            normal: {
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '24',
                                }
                            }
                        }
                    }, {
                        itemStyle: {
                            normal: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        },
                        value: 10
                    }]
                }
            ]
        };
        myChart.setOption(option);
    }
    // 过夜游客分析
    function myChart3() {
        var myChart = echarts.init(document.getElementById('hotel_3'));
        let myColor=['#4B66C7','#9A4CFB','#E76D59','#53FCB3','#00E4FF']
        let dayList=['9.16','9.17','9.18','9.19','9.20','9.21','9.22']
        var fontColor = '#30eee9';
        option ={
            grid: {
                left: '9%',
                right: '10%',
                top:'20%',
                bottom: '15%',
                containLabel: true
            },
            tooltip : {
                show: true,
                trigger: 'axis'
            },
            legend: {
                show:false,
                x:'center',
                top:'1%',
                y:'35',
                icon: 'stack',
                itemWidth:10,
                itemHeight:10,
                textStyle:{
                    color:'#fff'
                },
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisLabel:{
                        color: fontColor
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#397cbc'
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    splitLine:{
                        show:false,
                        lineStyle:{
                            color:'#195384'
                        }
                    },
                    data :dayList
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '(万人)',
                    min:0,
                    max:2000,
                    axisLabel : {
                        formatter: '{value}',
                        textStyle:{
                            color:'#2ad1d2'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#27b4c2'
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#11366e'
                        }
                    }
                }

            ],
            series : [
                {
                    type:'line',
                    stack: '总量',
                    symbol:'circle',
                    symbolSize: 8,
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color:'#0092f6',
                            lineStyle: {
                                color: "#0092f6",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,146,246,0.9)'
                                }]),
                            }
                        }
                    },
                    markPoint:{
                        itemStyle:{
                            normal:{
                                color:'red'
                            }
                        }
                    },
                    data:[0, 0, 0, 0, 0, 0, 0]
                },
                
            ]
        };


        myChart.setOption(option);

    }
    // 过夜游客源省TOP10
    function myChart4() {
        let datas = [0,0 ,0 , 0, 0,0, 0, 0, 0, 0];
        let cityData = ['河南', '山西','陕西','河北','江苏','四川','安徽','山东','北京','湖北']
        let cityDataBack =  ['河南', '山西','陕西','河北','江苏','四川','安徽','山东','北京','湖北']
        var myChart = echarts.init(document.getElementById('hotel_4'));
        let myColor=['#4B66C7','#9A4CFB','#E76D59','#53FCB3','#00E4FF']

        var sum = getsum(datas);

        function getsum(arr) {
            return arr.reduce(function (prev, curr, idx, arr) {
                return prev + curr;
            });
        }

        option = {
            title: {
                show:false,
                text: '客源地TOP10',
                top: '2%',
                left: '10',
                textStyle: {
                    fontSize: 14,
                    color: '#fff',
                    fontWeight: 'bold'
                }
            },
            grid: {
                top: '12%',
                right: '10%',
                left: '20%',
                bottom: '3%'
            },
            xAxis: {
                gridIndex: 0,
                show: false,
            },
            yAxis: {
                gridIndex: 0,
                splitLine: 'none',
                axisTick: 'none',
                axisLine: 'none',
                axisLabel: {
                    align: 'left',
                    padding: [0, 0, 0, -40],
                    textStyle: {
                        color: '#fff',
                        fontSize: '12px',
                        rich: {
                            a: {
                                fontSize: 12,
                                backgroundColor: '#E15D68',
                                borderRadius: 10,
                                padding: [2, 5],
                                textAlign: 'center',
                                color: '#fff',

                            },
                            b: {
                                fontSize: 12,
                                backgroundColor: '#FFAA25',
                                borderRadius: 10,
                                padding: [2, 5],
                                textAlign: 'center',
                                color: '#fff',
                            },
                            c: {
                                fontSize: 12,
                                backgroundColor: '#14C6CA',
                                borderRadius: 10,
                                padding: [2, 5],
                                textAlign: 'center',
                                color: '#fff',
                            },
                            d: {
                                fontSize: 12,
                                textAlign: 'center',
                                padding: [2, 4],
                                color: '#14C6CA',
                            }
                        }
                    },
                    formatter: function (params) {
                        var data = cityDataBack
                        for (var i = 0; i < 10; i++) {
                            if (data[i] == params)  {
                                var j = i + 1
                                if (i == 0) {
                                    return '{a|' + j + '} ' + params
                                }
                                if (i == 1) {
                                    return '{b|' + j + '} ' + params

                                }
                                if (i == 2) {
                                    return '{c|' + j + '} ' + params
                                }
                                if (i > 2) {
                                    return '{d| ' + j + '}' + params
                                }
                            }

                        }
                    },
                },

                data: cityData.reverse()
            },
            series: {
                name: '值',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: datas,
                label: {
                    normal: {
                        show: true,
                        position: ['30px', '3px'],
                        offset: [0, 0],
                        color: '#fff',
                        fontSize: '12px',
                        // formatter: function (item) {
                        //     return item.value + '人' + '\xa0\xa0 ' + (item.value / sum * 100).toFixed(2) + '%'
                        // }
                    }
                },
                barWidth: '15px',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: 'rgba(0,228,255,0.1)'
                        }, {
                            offset: 1,
                            color: 'rgba(0,228,255,1)'
                        }]),
                        barBorderRadius: 0,
                    }
                },
                z: 2
            },

        };
        myChart.setOption(option);

    }
    //过夜停留时长
    function myChart5() {
        var myChart = echarts.init(document.getElementById('hotel_5'));
        let colors=['#4B66C7','#9A4CFB','#44D798','#E76D59','#53FCB3','#00E4FF']
        var data = {
            dataAge: [
                {value:0, name:'一夜游'},
                {value:0, name:'两夜游'},
                {value:0, name:'三夜游'},
                {value:0, name:'四夜游'},
                {value:0, name:'五夜游'},
                {value:0, name:'五夜以上'}]
        };
        option = {
            legend: {
                // show:false,
                right:'3%',
                top:'12%',
                orient:'vertical',
                icon: 'circle',
                textStyle: {
                    color: '#fff',
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: (params) => {
                    console.log(params)
                    return '出行方式' + '<br/>' + params.marker + params.data.name + ':' + params.data.value + '%'
                }
            },
            color: colors,
            series: [
                {
                    type: 'pie',
                    radius: ['35', '60'],
                    center:['40%','50%'],
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 80,
                            lineStyle: {
                                type: 'solid'
                            }
                        }

                    },
                    label: {
                        normal: {
                            formatter: (params) => {
                                // console.log(params);
                                return '{b| ' + params.name + '}' + '\xa0\xa0' + '{c|' + params.percent.toFixed(0) + '%}'
                            },
                            borderWidth: 0,
                            borderRadius: 4,
                            padding: [0, -80],
                            height: 40,
                            fontSize: 12,
                            align: 'center',
                            color: '#3494BD',
                            rich: {
                                b: {
                                    fontSize: 12,
                                    lineHeight: 20,
                                    color: '#fff',
                                },
                                c: {
                                    fontSize: 12,
                                    lineHeight: 20,
                                    color: '#0df1de'
                                }

                            }
                        }
                    },
                    data: data.dataAge,
                },

            ]
        };
        myChart.setOption(option);

    }


    
    setTimeout( myChart1(),1000);
    setTimeout(circle1(),1200);
    setTimeout(circle2(),1400);
    setTimeout(myChart3(),1800);
    setTimeout(myChart4(),2000);
    setTimeout(myChart5(),2400);
})
